<!--
 * @descripttion: 注册
 * @author: cp
 * @Date: 2021-04-25 21:42:40
-->
<template>
  <div>
    <h3>注册</h3>
    <a-form :model="info" :wrapper-col="wrapperCol" :rules="rules">
      <a-form-item label="用户名" prop="userName">
        <a-input v-model:value="info.userName" @blur="nameIsTrue" />
      </a-form-item>
      <a-form-item label="密码" prop="password">
        <a-input type="password" v-model:value="info.password" />
      </a-form-item>
      <a-form-item label="性别" prop="gender">
        <a-radio-group v-model:value="info.gender" button-style="solid">
          <a-radio-button value="1">男</a-radio-button>
          <a-radio-button value="2">女</a-radio-button>
          <a-radio-button value="3">保密</a-radio-button>
        </a-radio-group>
      </a-form-item>
    </a-form>
    <div>
      <a-button type="primary" @click="handleLogin">登录</a-button>
      <a-button @click="handleReg">注册</a-button>
    </div>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, toRaw, defineComponent} from 'vue';
import { useRouter } from 'vue-router'
import { register, isExist } from '../../api/user'
export default defineComponent({
  setup () {
    const router = useRouter()
    const data = reactive({
      info: {
        userName: '',
        password:'',
        gender: '3'
      },
      handleReg() {
        let req = toRaw(data.info)
        register(req).then(res => {
          console.log(res)
        })
      },

      nameIsTrue() {
        let req = {
          userName:  data.info.userName
        }
        isExist(req).then((res: any) => {
          console.log(res)
          if(res) {
            alert('用户名已存在')
          }
        })
      },

      handleLogin () {
        router.push('/login')
      }
    })
    const rules = {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    return {
      rules,
      ...toRefs(data)
    }
  }
})
</script>

<style>

</style>